<template>
  <view class="container">
    <view class="form">
      <view class="item">
        <view class="title">抬头类型</view>
        <view>
          <radio :checked="choose" @click="choose = !choose" style="transform: scale(0.7)" color="#3483F6"></radio>
          <text style="padding-right: 80rpx">企业单位</text>
          <radio :checked="!choose" @click="choose = !choose" style="transform: scale(0.7)" color="#3483F6"></radio>
          <text>个人</text>
        </view>
      </view>
      <view class="item">
        <view class="title">发票金额</view>
        <view>
          <text style="font-weight: bold; font-size: 32rpx; color: #f30021">{{ money }}</text>
          <text style="font-weight: 500; font-size: 28rpx; color: #222222">元</text>
        </view>
      </view>
      <view class="item">
        <view class="title">发票抬头</view>
        <input type="text" placeholder="请输入" class="ipt" v-model="title" />
      </view>
      <view class="item">
        <view class="title">税号</view>
        <input type="number" placeholder="请输入" class="ipt" v-model="taxid" />
      </view>
      <view class="item">
        <view class="title">接收邮箱</view>
        <input type="number" placeholder="请输入" class="ipt2" v-model="mail" />
        <text>@qq.com</text>
      </view>
    </view>
    <view class="submit" @click="tijiao">提交申请</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      choose: true, // 选择个人或者企业
      order_ids: '',
      money: '',
      title: '',
      taxid: '',
      mail: ''
    };
  },
  onLoad(opt) {
    if (opt.ids) {
      this.order_ids = opt.ids;
      console.log(this.order_ids);
    }
    if (opt.money) {
      this.money = opt.money;
      console.log(this.money);
    }
  },
  methods: {
    async tijiao() {
      const res = await this.http('/ticket/add', {
        type: this.choose ? '1' : '2',
        order_ids: this.order_ids,
        money: this.money,
        title: this.title,
        taxid: this.taxid,
        mail: this.mail
      });
      console.log('返回值', res);
      if (res.code == 1) {
        uni.showToast({
          title: res.msg
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        uni.showToast({
          title: res.msg
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx 24rpx;
  .form {
    box-sizing: border-box;
    width: 702rpx;
    height: 600rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 48rpx;
      .title {
        font-weight: 500;
        font-size: 28rpx;
        color: #222222;
        width: 130rpx;
        margin-right: 30rpx;
      }
      .ipt {
        box-sizing: border-box;
        width: 488rpx;
        height: 90rpx;
        background: #f6f6f6;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        border: 1rpx solid #e2e2e2;
        padding: 24rpx 28rpx;
      }
      .ipt2 {
        box-sizing: border-box;
        width: 342rpx;
        height: 90rpx;
        background: #f6f6f6;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        border: 1rpx solid #e2e2e2;
        padding: 24rpx 28rpx;
      }
    }
  }
  .submit {
    width: 654rpx;
    height: 92rpx;
    background: #3483f6;
    text-align: center;
    line-height: 92rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    margin-top: 190rpx;
    margin-left: 24rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}
</style>
